<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body onload="fetchStuList()">
    <form action="" method="post">
      学号:<input type="text" id="sid" placeholder="请输入学号" /> <br />
      姓名:<input type="text" id="sname" placeholder="请输入姓名" /> <br />
      性别: <input type="radio" name="sex" id="boySex" value="男" checked />男
      <input type="radio" name="sex" id="girlSex" value="女" />女
      <input type="radio" name="sex" id="girlSex2" value="X" />X
      <input type="radio" name="sex" id="girlSex3" value="人妖" />人妖
      <input type="radio" name="sex" id="girlSex4" value="保密" />保密 <br />
      <button type="button" onclick="addStu()">新增</button>
      <button type="button" onclick="delStu()">删除选中</button>
    </form>
    <hr />
    <input type="search" id="keyword" placeholder="请输入姓名" />
    <button onclick="searchStuList()">搜索</button>
    <button onclick="clearSeach()">清空</button>
    <p></p>
    <table border="1">
      <thead>
        <tr>
          <th><input type="checkbox" onclick="doCheckedStu()" /></th>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="stuDataList"></tbody>
    </table>
  </body>
</html>
<script>
  var stuAy = [
    { sid: 'S1', sname: 'zhang3', sex: '人妖' },
    { sid: 'S2', sname: 'li4', sex: '男' },
    { sid: 'S3', sname: 'wang5', sex: '女' },
  ]
  //清空
  function clearSeach() {
    document.getElementById('keyword').value = ''
    fetchStuList()
  }

  //搜索
  function searchStuList() {
    var keyword = document.getElementById('keyword').value
    //获得tbody原有的内容
    var tbodyData = ''
    for (var i = 0; i < stuAy.length; i++) {
      if (stuAy[i].sname.indexOf(keyword) != -1) {
        tbodyData +=
          '<tr id="' +
          stuAy[i].sid +
          '">\
          <td><input type="checkbox" name="sid" value="' +
          stuAy[i].sid +
          '" /></td>\
          <td>' +
          stuAy[i].sid +
          '</td>\
          <td>' +
          stuAy[i].sname +
          '</td>\
          <td>' +
          stuAy[i].sex +
          '</td>\
          <td>\
            <a href="">查看/修改</a>\
            <a href="javaScript:delStu(\'' +
          stuAy[i].sid +
          '\')">删除</a>\
          </td>\
        </tr>'
      }
    }
    document.getElementById('stuDataList').innerHTML = tbodyData
  }

  //查询列表
  function fetchStuList() {
    console.log('=========查询列表========')
    //获得tbody原有的内容
    var tbodyData = ''
    for (var i = 0; i < stuAy.length; i++) {
      tbodyData +=
        '<tr id="' +
        stuAy[i].sid +
        '">\
          <td><input type="checkbox" name="sid" value="' +
        stuAy[i].sid +
        '" /></td>\
          <td>' +
        stuAy[i].sid +
        '</td>\
          <td>' +
        stuAy[i].sname +
        '</td>\
          <td>' +
        stuAy[i].sex +
        '</td>\
          <td>\
            <a href="">查看/修改</a>\
            <a href="javaScript:delStu(\'' +
        stuAy[i].sid +
        '\')">删除</a>\
          </td>\
        </tr>'
    }
    document.getElementById('stuDataList').innerHTML = tbodyData
  }

  //实现全选 全不选 反选功能
  function doCheckedStu() {
    var checkboxCompAy = document.getElementsByName('sid')
    for (var i = 0; i < checkboxCompAy.length; i++) {
      checkboxCompAy[i].checked = !checkboxCompAy[i].checked
    }
  }
  //根据 id 删除功能
  function delStu(sid) {
    //删除一条
    if (sid) {
      if (confirm('您确认删除吗?')) {
        console.log('删除一条')
        var trDelComp = document.getElementById(sid)
        trDelComp.remove()
      }
      return
    }
    //删除选中
    console.log('删除选中')
    var checkCompAy = document.querySelectorAll("[name='sid']:checked")
    if (checkCompAy.length == 0) {
      alert('请选择要删除的记录')
      return
    }
    if (confirm('您确认删除吗?')) {
      for (var i = 0; i < checkCompAy.length; i++) {
        //var id = checkCompAy[i].parentNode.parentNode.id
        var id = checkCompAy[i].value
        console.log('==========要删除的id是:' + id)
        document.getElementById(id).remove()
      }
    }
  }

  //新增功能
  function addStu() {
    //获得用户输入的学号
    var sid = document.getElementById('sid').value
    var sname = document.getElementById('sname').value
    var sex = document.querySelector('[name="sex"]:checked').value
    console.log('用户输入的学号是:' + sid + ',姓名:' + sname + ',性别:' + sex)
    //创建 js 对象
    var stu = { sid: sid, sname: sname, sex: sex }
    //添加数组中
    stuAy.push(stu)
    //调用 显示学生列表方法
    fetchStuList()
  }
</script>
